<template>
	<div>
		<Tabs :tabs="tabs" @tabsItemChange="onTabsItemChange">
			<view class="collect_main">
				<!-- tips -->
				<view class="collect_title">
					<text class="collect_tips active">全部</text>
					<text class="collect_tips">热卖</text>
					<text class="collect_tips">即将上线</text>
				</view>
				<!-- 内容区 -->
				<view class="collect_content">
					<view class="collect_main">
						<!-- 每项 -->
						<view class="collect_item" v-for="(item,index) in collectList" :key="index">
							<!-- 图片 -->
							<navigator class="collect_pic" url="">
								<image mode="widthFix" :src="item.goods_small_logo"></image>
							</navigator>
							<!-- 商品信息 -->
							<view class="collect_info">
								<view class="goods_name">{{item.goods_name}}</view>
								<view class="goods_price">${{item.goods_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</Tabs>
	</div>
</template>

<script>
	import Tabs from '@/components/tabs'

	export default {
		data() {
			return {
				tabs: [{
						id: 0,
						value: '商品收藏',
						isActive: true
					},
					{
						id: 1,
						value: '店铺收藏',
						isActive: false
					},
					{
						id: 2,
						value: '喜欢',
						isActive: false
					},
					{
						id: 3,
						value: '浏览足迹',
						isActive: false
					}
				],
				collectList: []
			}
		},
		onLoad: function(options) {
			console.log(options);
		},
		onTabsItemChange(index) {
			this.tabs.forEach((v, i) => {
				i === index ? v.isActive = true : v.isActive = false
			})
		},
		onShow() {
			const collectList = uni.getStorageSync "collectList");
		this.setData({
			collectList
		})
	}
	}
</script>

<style lang='less' scope>
	/* pages/order/order.wxss */
	.order_wrap {
		.order_item {
			padding: 20rpx;

			.order_row {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0;

				.left {
					flex: 2;
				}

				.right {
					flex: 5;
					text-align: right;
				}

				.price {
					color: var(--themeColor);
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}
	}

	.collect_main {
		background-color: #eee;

		.collect_title {
			padding: 40rpx 0;

			.collect_tips {
				padding: 15rpx;
				border: 1rpx solid #eee;
				margin-left: 15rpx;
				background-color: #fff;
			}

			.active {
				border: 1rpx solid var(--themeColor);

			}
		}

		.collect_content {

			.collect_main {
				width: 100%;

				.collect_item {
					padding: 10px;
					display: flex;
					border-bottom: 1px solid #ccc;
					background-color: #fff;

					.collect_pic {
						flex: 2;
						display: flex;
						flex-direction: column;
						justify-content: center;

						image {
							width: 80%;
						}
					}

					.collect_info {
						flex: 4;
						display: flex;
						// 上下排
						flex-direction: column;
						justify-content: space-around;
						align-items: center;

						// 上 - 名字
						.goods_name {
							display: -webkit-box;
							overflow: hidden;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							color: #666;
						}

						// 价格数字
						.goods_price {
							color: var(--themeColor);
							font-size: 34rpx;
							width: 100%;
						}
					}
				}

			}
		}
	}
</style>
